<template>
    <div class="container">
       <header></header>
       <main>
            <aside>
                <ul>
                    <li v-for="navItem in navList" :key="navItem.key" class="navItem">
                        {{navItem.title}}
                        <ul>
                            <li v-for="subNavItem in navItem.children" :key="subNavItem.key" class="subNavItem">
                               <router-link :to="subNavItem.path">{{subNavItem.title}}</router-link>
                            </li>
                        </ul>
                    </li>
                </ul>
            </aside>
            <main>
                <!-- 
                    keep-alive中的include或者exclude是和组件的name对应的
                    这种设置有两个缺点
                    1）你必须要给每个组件都要设置一个name属性
                    2）如果缓存组件和不缓存组件都比较多，必须一个一个的进行设置
                 -->
                <!-- <keep-alive include="StudentsAdd">
                    <router-view></router-view>
                </keep-alive> -->
                <keep-alive>
                     <router-view v-if="$route.meta.isKeepAlive"></router-view>
                </keep-alive>
                <router-view v-if="!$route.meta.isKeepAlive"></router-view>
              
            </main>
       </main>
    </div>
</template>

<script>
export default {
    data(){
        return{
            navList:[
                {
                    key:'1',
                    path:'',
                    icon:'',
                    title:'学生管理',
                    children:[
                        {
                            key:'11',
                            path:'/home/studentsList',
                            icon:'',
                            title:'学生列表'
                        },
                        {
                            key:'12',
                            path:'/home/studentsAdd',
                            icon:'',
                            title:'新增学生'
                        }
                    ]
                },
                {
                    key:'2',
                    path:'',
                    icon:'',
                    title:'班级管理',
                    children:[
                        {
                            key:'21',
                            path:'/home/classesList',
                            icon:'',
                            title:'班级列表'
                        },
                        {
                            key:"22",
                            path:'/home/classesAdd',
                            icon:'',
                            title:'新增班级'
                        }
                    ]
                }
            ]
        }
    }
}
</script>

<style lang="scss">
    .container{
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        header{
            width: 100vw;
            height: 80px;
            background-color: gray;
        }
        main{
            display: flex;
            flex: 1;
            aside{
                height: 100%;
                width: 220px;
                background-color: gray;
                .navItem{
                    margin-left: 30px;   
                    .subNavItem{
                         margin-left: 30px;   
                    }
                }
            }
            main{
                flex: 1;
                background:  white
            }
        }
    }
</style>